<template>
  <Header msg="头部分" @refreshParent="refreshParent" class="fixed-header"></Header>
  <div ref="targetDiv" class="ycnz">
    <div class="homeMain min_height">
      <!-- 优化第一部分：增加视觉冲击力 -->
      <div class="hero-section">
        <div class="hero-content animate-fade-in">
          <h1 class="hero-title animate-slide-down">
            图锐配音 
            <span class="gradient-text animate-gradient">引领时尚潮流</span>
          </h1>
          <div class="hero-subtitle animate-slide-up">500W+ 在用 短视频达人必备</div>
          <div class="hero-actions">
            <el-button type="primary" size="large" class="start-button">
              立即开始使用
              <el-icon class="el-icon--right"><VideoPlay /></el-icon>
            </el-button>
          </div>
        </div>

        <!-- 优化轮播图指示器布局 -->
        <div class="feature-nav">
          <div v-for="(item, index) in indicators" 
               :key="index" 
               class="feature-item animate-fade-in"
               :style="{ animationDelay: `${index * 0.1}s` }"
               :class="{ active: currentIndex === index }" 
               @click="changeSlide(index)">
            <div class="feature-icon">
              <img :src="item.image" :alt="item.text">
            </div>
            <div class="feature-text">{{ item.text }}</div>
          </div>
        </div>

        <!-- 优化轮播图展示 -->
        <div class="carousel-wrapper">
          <el-carousel 
            ref="carousel" 
            :interval="5000" 
            type="card" 
            height="500px"
            @change="handleSlideChange">
            <el-carousel-item v-for="(url, index) in urls" :key="index">
              <el-image :src="url" lazy fit="cover" />
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>

      <!-- 优化第二部分：数据展示 -->
      <div class="stats-section">
        <h2 class="section-title animate-slide-up">
          <span class="highlight-text">助力创作者</span>
          打造爆款内容
        </h2>
        <div class="stats-container">
          <div class="stat-card animate-fade-in" :style="{ animationDelay: '0.2s' }">
            <div class="stat-icon">
              <el-icon class="stats-icon"><VideoCameraFilled /></el-icon>
            </div>
            <div class="stat-value counting-number">151,999,100<span class="plus">+</span></div>
            <div class="stat-label">全平台声音合成总数</div>
            <div class="stat-description">持续为创作者提供优质配音服务</div>
          </div>
          
          <div class="stat-card animate-fade-in" :style="{ animationDelay: '0.4s' }">
            <div class="stat-icon">
              <el-icon class="stats-icon"><Headset /></el-icon>
            </div>
            <div class="stat-value counting-number">500,000<span class="plus">+</span></div>
            <div class="stat-label">活跃创作者</div>
            <div class="stat-description">信赖之选，创作者首选平台</div>
          </div>
          
          <div class="stat-card animate-fade-in" :style="{ animationDelay: '0.6s' }">
            <div class="stat-icon">
              <el-icon class="stats-icon"><Document /></el-icon>
            </div>
            <div class="stat-value counting-number">98<span class="percent">%</span></div>
            <div class="stat-label">好评率</div>
            <div class="stat-description">优质服务，用户至上</div>
          </div>
        </div>
      </div>

      <!-- 优化第三部分：服务介绍 -->
      <div class="services-section">
        <h2 class="section-title">
          <span class="gradient-text">多元化声音领域</span>
          <span class="subtitle">一站式配音服务</span>
        </h2>
        
        <div class="services-grid">
          <div class="service-card animate-fade-in" v-for="(service, index) in services" 
               :key="index" 
               :style="{ animationDelay: `${index * 0.2}s` }">
            <div class="service-icon">
              <img :src="service.icon" :alt="service.title">
            </div>
            <h3 class="service-title">{{ service.title }}</h3>
            <p class="service-description">{{ service.description }}</p>
            <div class="service-features">
              <span v-for="(feature, fIndex) in service.features" 
                    :key="fIndex" 
                    class="feature-tag">
                {{ feature }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <Footer msg="脚部分"></Footer>
  <Up_module msg="回到顶部"></Up_module>
</template>

<script>
import { ref, computed, onMounted } from 'vue';
import { Moon, Sunny, Headset, Download, VideoCameraFilled, Document, Upload, VideoPlay } from '@element-plus/icons-vue';
import Footer from '../components/footer.vue';
import Header from '../components/header.vue';
import Up_module from '../components/up_module.vue';
import "../components/css/Homepage.css";

export default {
  components: {
    Footer,
    Header,
    Up_module
  },
  setup() {
    const isDarkMode = ref(false);
    const targetDiv = ref(null);
    const textarea = ref('');

    // 轮播图图片 URL
    const urls = ref([
      'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
      'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
      'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
      'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
      'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
      'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
      'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
    ]);

    // 当前轮播图索引
    const currentIndex = ref(0);
    const carousel = ref(null);

    // 轮播图指示器数据
    const indicators = ref([
      { image: 'src/views/images/buttonpicture/duyinlianxu.png', text: '读音连续' },
      { image: 'src/views/images/buttonpicture/bianyin.png', text: '智能配音' },
      { image: 'src/views/images/buttonpicture/jincoumoshi.png', text: '文稿提取' },
      { image: 'src/views/images/buttonpicture/jieshuo.png', text: '人声分离' },
      { image: 'src/views/images/buttonpicture/jububiansu.png', text: '音频变声' },
      { image: 'src/views/images/buttonpicture/mingancijc.png', text: '封面制作' },
      { image: 'src/views/images/buttonpicture/jinyici.png', text: '视频去水印' }
    ]);

    // 获取 cookie
    function getCookie(name) {
      const nameEQ = name + "=";
      const ca = document.cookie.split(';');
      for (let i = 0; i < ca.length; i++) {
        let c = ca[i].trim();
        if (c.startsWith(nameEQ)) return c.substring(nameEQ.length);
      }
      return null;
    }

    // 初始化时设置默认主题
    onMounted(() => {
      const user = getCookie('nightMode');
      if (user == "") {
        targetDiv.value.className = "light";
      } else {
        targetDiv.value.className = user;
      }

      // 添加滚动监听，当元素进入视口时触发动画
      const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            entry.target.classList.add('animate-fade-in');
          }
        });
      });

      // 监听需要动画的元��
      document.querySelectorAll('.animate-fade-in').forEach(el => {
        observer.observe(el);
      });
    });

    // 处理轮播图切换事件
    const handleSlideChange = (index) => {
      currentIndex.value = index;
    };

    function refreshParent() {

      const user = getCookie('nightMode');
      if (user == "") {
        targetDiv.value.className = "light";
      } else {

        targetDiv.value.className = user;
      }

    };


    // 切换轮播图
    const changeSlide = (index) => {
      currentIndex.value = index;
      carousel.value.setActiveItem(index);
    };

    const services = ref([
      {
        icon: 'src/views/images/buttonpicture/duyinlianxu.png',
        title: '智能配音',
        description: '专业的AI配音技术，多场景配音方案',
        features: ['情感真实', '音色丰富', '场景配']
      },
      {
        icon: 'src/views/images/buttonpicture/bianyin.png',
        title: '音频处理',
        description: '专业的音频编辑与处理工具',
        features: ['降噪处理', '音效添加', '音质增强']
      },
      {
        icon: 'src/views/images/buttonpicture/jincoumoshi.png',
        title: '文稿优化',
        description: '智能文本处理与优化系统',
        features: ['智能断句', '语义优化', '情感标注']
      },
      {
        icon: 'src/views/images/buttonpicture/jieshuo.png',
        title: '场景定制',
        description: '多场景配音解决方案',
        features: ['广告配音', '课程解说', '视频配音']
      }
    ]);

    return {
      isDarkMode,
      Headset,
      Document,
      Download,
      VideoCameraFilled,
      Moon,
      Sunny,
      targetDiv,
      textarea,
      VideoPlay,
      urls,
      currentIndex,
      carousel,
      indicators,
      handleSlideChange,
      changeSlide,
      refreshParent,
      services
    };
  },
};
</script>

<style scoped>
/* 整体布局优化 */
.homeMain {
  margin-top: 90px;
  width: 90%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

/* Hero区域样式优化 */
.hero-section {
  padding: 60px 0;
  text-align: center;
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.hero-title {
  font-size: 4rem;
  font-weight: bold;
  background: linear-gradient(45deg, #2B5876, #4E4376);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 20px;
}

.hero-subtitle {
  font-size: 1.5rem;
  color: #666;
  margin-bottom: 40px;
}

.start-button {
  padding: 15px 40px;
  font-size: 1.2rem;
  border-radius: 30px;
  transition: transform 0.3s ease;
}

.start-button:hover {
  transform: translateY(-2px);
}

/* 功能导航优化 */
.feature-nav {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 20px;
  margin: 40px auto;
  max-width: 1200px;
  padding: 0 20px;
}

.feature-item {
  padding: 15px;
  border-radius: 12px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.feature-item:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.feature-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 10px;
}

.feature-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.feature-text {
  font-size: 14px;
  color: #666;
}

/* 轮播图优化 */
.carousel-wrapper {
  margin-top: 40px;
}

.el-carousel__item {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* 数据统计区域优化 */
.stats-section {
  padding: 80px 0;
  background: linear-gradient(to right, #f8f9fa, #e9ecef);
  border-radius: 30px;
  margin: 60px 0;
}

.section-title {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 40px;
  color: #333;
}

.stats-container {
  text-align: center;
}

.stat-value {
  font-size: 4rem;
  font-weight: bold;
  background: linear-gradient(45deg, #2B5876, #4E4376);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 20px 0;
}

.stat-label {
  font-size: 1.5rem;
  color: #666;
}

/* 服务介绍区域优化 */
.services-section {
  padding: 80px 0;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  padding: 40px 20px;
}

/* 响应式优化 */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2.5rem;
  }

  .hero-subtitle {
    font-size: 1.2rem;
  }

  .feature-nav {
    grid-template-columns: repeat(4, 1fr);
  }

  .stat-value {
    font-size: 3rem;
  }
}

@media (max-width: 480px) {
  .feature-nav {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 基础动画关键帧 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideDown {
  from { transform: translateY(-50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes gradientFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

/* 应用动画的类 */
.animate-fade-in {
  animation: fadeIn 1s ease-out forwards;
  opacity: 0;
}

.animate-slide-down {
  animation: slideDown 1s ease-out forwards;
  opacity: 0;
}

.animate-slide-up {
  animation: slideUp 1s ease-out forwards;
  opacity: 0;
}

.gradient-text {
  background: linear-gradient(45deg, #2B5876, #4E4376, #DA4453);
  background-size: 200% 200%;
  animation: gradientFlow 3s ease infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 功能导航悬浮效果增强 */
.feature-item {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-item:hover {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

/* 数字滚动动画 */
.counting-number {
  transition: all 0.3s ease;
  animation: float 3s ease-in-out infinite;
}

/* 轮播图过渡效果增强 */
.carousel-wrapper {
  perspective: 1000px;
}

.el-carousel__item {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

.el-carousel__item:hover {
  transform: scale(1.02) rotateY(2deg);
}

/* 响应式动画调整 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* 暗色模式适配 */
.dark .gradient-text {
  background: linear-gradient(45deg, #64B5F6, #81C784, #FFB74D);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 新增悬浮卡片效果 */
.stats-section {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stats-section:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* 按钮动效增强 */
.start-button {
  position: relative;
  overflow: hidden;
}

.start-button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.start-button:hover::after {
  width: 300px;
  height: 300px;
}

/* 图标旋转动画 */
.el-icon--right {
  transition: transform 0.3s ease;
}

.start-button:hover .el-icon--right {
  transform: rotate(360deg);
}

/* 数据统计卡片样式优化 */
.stats-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  padding: 40px 20px;
}

.stat-card {
  background: white;
  border-radius: 20px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.stat-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  background: linear-gradient(45deg, #2B5876, #4E4376);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stats-icon {
  font-size: 40px;
  color: white;
}

.stat-value {
  font-size: 3.5rem;
  font-weight: bold;
  background: linear-gradient(45deg, #2B5876, #4E4376);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 10px 0;
}

.plus, .percent {
  font-size: 2rem;
  vertical-align: super;
}

.stat-description {
  color: #666;
  margin-top: 10px;
  font-size: 0.9rem;
}

/* 服务卡片样式优化 */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  padding: 40px 20px;
}

.service-card {
  background: white;
  border-radius: 20px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.service-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.service-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
}

.service-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.service-title {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 15px;
}

.service-description {
  color: #666;
  margin-bottom: 20px;
  line-height: 1.6;
}

.service-features {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.feature-tag {
  background: rgba(43, 88, 118, 0.1);
  color: #2B5876;
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 0.9rem;
}

/* 标题样式优化 */
.section-title {
  text-align: center;
  margin-bottom: 50px;
}

.highlight-text {
  color: #2B5876;
  position: relative;
  display: inline-block;
}

.highlight-text::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(45deg, #2B5876, #4E4376);
  border-radius: 2px;
}

.subtitle {
  display: block;
  font-size: 1.5rem;
  color: #666;
  margin-top: 10px;
}

/* 响应式优化 */
@media (max-width: 768px) {
  .stats-container {
    grid-template-columns: 1fr;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .stat-value {
    font-size: 2.5rem;
  }
}
</style>